new Vue({
    el: '#app',
    data: {
        chatHistory: [],
        inputMessage: '',
        displayText: '这里将显示查询结果的详细信息',
        chart: null,
        loading: false,
        conversationId: '',
        apikey:'app-arGnEqolQdf8DDfQnxi7rhx5',
        apiUrl: 'http://114.55.133.74/v1/chat-messages',
        lastMessageId: '',
        headers: {
            'Authorization': 'Bearer ',
            'Content-Type': 'application/json'
        },
        suggestedQuestions: [],
      
        uploadLoading: false,
        currentTaskId: null,
        isGenerating: false,
        dataBuffer: '', // 添加数据缓冲区
        aiResponseText: '', // 存储完整的AI回复文本
        typingTimer: null, // 用于打字机效果的定时器
        typingQueue: [], // 打字队列
        isTyping: false,  // 是否正在打字
        loadingSuggestions: false, // 新增：建议问题加载状态
        dynamicData: null,
        showCharts: false,
        jsonDetected: false, // 新增：跟踪是否已经检测到JSON数据
        showLoadingMessage: false, // 新增：控制是否显示加载消息
        loadingTimer: null, // 新增：加载消息定时器
        loadingStatusText: '连接服务器中...', // 新增：动态加载状态文本
        loadingStatusSteps: [ // 新增：加载状态步骤
            '连接服务器中...',
            '分析问题内容...',
            '检索相关数据...',
            '生成智能回复...',
            '优化显示效果...'
        ],
        currentLoadingStep: 0, // 新增：当前加载步骤索引
        loadingStepTimer: null, // 新增：加载步骤计时器
        dynamicItems: {}, // 新增：存储动态数据项
        dataArray:[],
        projectName:'',
        // 新增：DeepSeek API 配置
        deepseekConfig: {
            apiKey: 'sk-c4a66863fb604a8bb29c1bb44b5c1834', // 在这里填入您的 DeepSeek API Key
            baseUrl: 'https://api.deepseek.com',
            model: 'deepseek-chat'
        },
        // 新增：动态界面生成状态
        dynamicHtmlEnabled: false,
        generatedHtmlContent: '',
        htmlGenerationPrompt: ''
    },
    async created() {
        await this.getIntroduction();
        // 初始化 DeepSeek API Key（可以从环境变量或配置文件读取）
        this.initDeepSeekConfig();
    },
    mounted() {
        // 确保Vue实例在全局可用
        this.headers.Authorization = 'Bearer ' + this.apikey;
        window.vueApp = this;
    },
    methods: {
        // 新增：初始化 DeepSeek 配置
        initDeepSeekConfig() {
            // 这里可以从配置文件或环境变量读取 API Key
            // 为了演示，这里需要您手动设置 API Key
            if (!this.deepseekConfig.apiKey) {
                console.warn('请在 deepseekConfig.apiKey 中设置您的 DeepSeek API Key');
                // 可以添加一个提示让用户输入 API Key
                this.promptForDeepSeekApiKey();
            }
        },

        // 新增：提示用户输入 DeepSeek API Key
        promptForDeepSeekApiKey() {
            this.$prompt('请输入您的 DeepSeek API Key', '配置 DeepSeek API', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^sk-[a-zA-Z0-9]+$/,
                inputErrorMessage: 'API Key 格式不正确'
            }).then(({ value }) => {
                this.deepseekConfig.apiKey = value;
                this.$message.success('DeepSeek API Key 配置成功');
                localStorage.setItem('deepseek_api_key', value);
            }).catch(() => {
                // 从 localStorage 尝试读取
                const savedKey = localStorage.getItem('deepseek_api_key');
                if (savedKey) {
                    this.deepseekConfig.apiKey = savedKey;
                }
            });
        },

        // 新增：调用 DeepSeek API 生成 HTML 界面
        async generateDynamicHtmlWithDeepSeek(dataArray) {
            if (!this.deepseekConfig.apiKey) {
                this.$message.error('DeepSeek API Key 未配置');
                return null;
            }

            try {
                const prompt = this.createHtmlGenerationPrompt(dataArray);
                
                const response = await fetch(`${this.deepseekConfig.baseUrl}/chat/completions`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${this.deepseekConfig.apiKey}`
                    },
                    body: JSON.stringify({
                        model: this.deepseekConfig.model,
                        messages: [
                            {
                                role: 'system',
                                content: `你是一个专业的前端开发专家，擅长根据数据生成美观的 HTML 界面。请根据提供的数据生成现代化、响应式的 HTML 代码片段。
                                
                                要求：
                                1. 使用现代 CSS 样式（可以使用 Flexbox 或 Grid 布局）
                                2. 界面要美观且具有良好的用户体验
                                3. 适配移动端和桌面端
                                4. 使用适当的颜色搭配和排版
                                5. 只返回 HTML 代码片段，不要包含完整的 HTML 文档结构
                                6. 可以使用内联 CSS 样式或者 <style> 标签
                                7. 确保生成的代码可以直接插入到现有页面中`
                            },
                            {
                                role: 'user',
                                content: prompt
                            }
                        ],
                        temperature: 0.7,
                        max_tokens: 2000,
                        stream: false
                    })
                });

                if (!response.ok) {
                    throw new Error(`DeepSeek API 请求失败: ${response.status}`);
                }

                const result = await response.json();
                const htmlContent = result.choices[0].message.content;
                
                // 清理可能的 markdown 代码块标记
                const cleanHtml = htmlContent.replace(/```html\n?/g, '').replace(/```\n?/g, '').trim();
                
                return cleanHtml;
            } catch (error) {
                console.error('DeepSeek API 调用失败:', error);
                this.$message.error(`生成动态界面失败: ${error.message}`);
                return null;
            }
        },

        // 新增：创建 HTML 生成提示词
        createHtmlGenerationPrompt(dataArray) {
            const dataDescription = dataArray.map(item => `${item.name}: ${item.value}`).join('\n');
            
            return `请根据以下数据生成一个美观的 HTML 界面：

数据内容：
${dataDescription}

请生成一个现代化的数据展示界面，包含以下元素：
1. 数据卡片或表格展示
2. 适当的图标和视觉元素
3. 响应式布局
4. 渐变色彩或现代配色方案
5. 悬停效果和交互反馈
6. 如果数据适合，可以添加简单的图表展示（使用 CSS 或简单的进度条）

数据数量：${dataArray.length} 项
界面风格：现代、简洁、专业`;
        },

        // 新增：应用动态生成的 HTML
        async applyDynamicHtml() {
            if (this.dataArray && this.dataArray.length > 0) {
                // 显示加载状态
                this.loading = true;
                this.isGenerating = true;
                
                this.$message.info('正在生成动态界面...');
                
                try {
                    const htmlContent = await this.generateDynamicHtmlWithDeepSeek(this.dataArray);
                    
                    if (htmlContent) {
                        this.generatedHtmlContent = htmlContent;
                        this.dynamicHtmlEnabled = true;
                        this.$message.success('动态界面生成成功！');
                    } else {
                        this.$message.error('动态界面生成失败');
                    }
                } catch (error) {
                    console.error('生成动态界面时出错:', error);
                    this.$message.error('生成动态界面时出错: ' + error.message);
                } finally {
                    // 确保加载状态被清除
                    this.loading = false;
                    this.isGenerating = false;
                }
            } else {
                this.$message.warning('暂无数据，无法生成动态界面');
            }
        },

        // 新增：重置到默认界面
        resetToDefaultView() {
            this.dynamicHtmlEnabled = false;
            this.generatedHtmlContent = '';
            this.$message.info('已切换回默认界面');
        },

        // 新增：使用 DeepSeek API 分析数据并生成洞察
        async analyzeDataWithDeepSeek(dataArray) {
            if (!this.deepseekConfig.apiKey || !dataArray || dataArray.length === 0) {
                return null;
            }

            try {
                const dataDescription = dataArray.map(item => `${item.name}: ${item.value}`).join('\n');
                
                const response = await fetch(`${this.deepseekConfig.baseUrl}/chat/completions`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${this.deepseekConfig.apiKey}`
                    },
                    body: JSON.stringify({
                        model: this.deepseekConfig.model,
                        messages: [
                            {
                                role: 'system',
                                content: '你是一个专业的数据分析师，擅长从数据中发现洞察和趋势。请对提供的数据进行分析，并提供有价值的见解。'
                            },
                            {
                                role: 'user',
                                content: `请分析以下数据并提供洞察：\n\n${dataDescription}\n\n请提供：\n1. 数据概述\n2. 关键发现\n3. 可能的趋势或模式\n4. 建议或推荐`
                            }
                        ],
                        temperature: 0.7,
                        max_tokens: 1000,
                        stream: false
                    })
                });

                if (!response.ok) {
                    throw new Error(`DeepSeek API 请求失败: ${response.status}`);
                }

                const result = await response.json();
                return result.choices[0].message.content;
            } catch (error) {
                console.error('DeepSeek 数据分析失败:', error);
                return null;
            }
        },

        // 新增：生成数据洞察（带loading状态）
        async generateDataInsights() {
            if (this.dataArray && this.dataArray.length > 0) {
                // 显示加载状态
                this.loading = true;
                this.isGenerating = true;
                
                this.$message.info('正在分析数据，请稍候...');
                
                try {
                    const insights = await this.analyzeDataWithDeepSeek(this.dataArray);
                    if (insights) {
                        // 将洞察添加到聊天历史中
                        this.chatHistory.push({
                            content: `🤖 **AI 数据分析洞察：**\n\n${insights}`,
                            isUser: false,
                            isInsight: true
                        });
                        
                        this.$message.success('数据分析完成！');
                        
                        this.$nextTick(() => {
                            const chatHistory = document.querySelector('.chat-history');
                            chatHistory.scrollTop = chatHistory.scrollHeight;
                        });
                    } else {
                        this.$message.error('数据分析失败');
                    }
                } catch (error) {
                    console.error('生成数据洞察时出错:', error);
                    this.$message.error('数据分析时出错: ' + error.message);
                } finally {
                    // 确保加载状态被清除
                    this.loading = false;
                    this.isGenerating = false;
                }
            } else {
                this.$message.warning('暂无数据，无法进行分析');
            }
        },

        async getIntroduction() {
            try {
                const response = await axios.get('http://114.55.133.74/v1/parameters', {
                    headers: {
                            'Authorization': 'Bearer ' + this.apikey
                    }
                });
                if (response.data) {
                    console.log('response.data:', response.data);
                    if (response.data) {
                         this.chatHistory = [{ content:response.data.opening_statement, isUser: false }];
                    }
                    if (response.data.suggested_questions) {
                        this.suggestedQuestions = response.data.suggested_questions;
                    }
                }
            } catch (error) {
                console.error('获取数据失败:', error);
                this.chatHistory = [{ content: '获取问候语失败，请输入您的问题', isUser: false }];
            }
        },
        processMessageLinks(message) {
            console.log(message,'message')
            if (message && typeof message === 'string' && message.includes('```json')) {
                try {
                    const parts = message.split('```json');
                    console.log(parts,'parts1')
                    if (parts.length > 1) {
                        const jsonString = parts[1].split('```')[0];
                        console.log(jsonString,'jsonString222')
                        if (jsonString && jsonString.trim() !== '') { // 确保jsonString修剪后不为空
                            const trimmedJsonString = jsonString.trim();
                            // 进一步检查是否可能是有效的JSON（至少包含 {} 或 []）
                            if ((trimmedJsonString.startsWith('{') && trimmedJsonString.endsWith('}')) || 
                                (trimmedJsonString.startsWith('[') && trimmedJsonString.endsWith('['))) {
                                const aa = JSON.parse(trimmedJsonString);
                                console.log(aa,'22222')
                                this.projectName = aa.projectName
                                if (aa && aa.requestedData && Array.isArray(aa.requestedData)) {
                                    const arr = aa.requestedData;
                                    const srt = arr.map(item => `${item.name}：${item.value}`).join('<br/>');
                                    
                                    // 返回处理后的内容，隐藏```json代码块，只显示前面的文本部分
                                    const beforeJson = parts[0];
                                    const afterJson = parts.length > 1 && parts[1].includes('```') ? 
                                        parts[1].split('```').slice(1).join('```') : '';
                                    
                                    return beforeJson + '' + 
                                           '<div style="background: #f8f9fa; padding: 2px; border-radius: 8px; border-left: 4px solid #667eea;">' +
                                           '<strong>📊 数据结果：</strong><br/>' + srt + '</div>' + 
                                           (afterJson ? '<br/>' + afterJson : '');
                                }
                            } else {
                                // 如果修剪后的字符串不是以 { 或 [ 开头并以 } 或 ] 结尾，则可能不是有效的JSON
                                console.warn('Skipping JSON parsing for non-JSON-like string in processMessageLinks:', trimmedJsonString);
                                // 隐藏无效的JSON代码块，只返回前面的文本
                                return parts[0] + (parts.length > 1 && parts[1].includes('```') ? 
                                    '<br/>' + parts[1].split('```').slice(1).join('```') : '');
                            }
                        } else {
                             // 如果jsonString为空或只包含空白，隐藏空的JSON代码块
                             return parts[0] + (parts.length > 1 && parts[1].includes('```') ? 
                                '<br/>' + parts[1].split('```').slice(1).join('```') : '');
                        }
                    }
                } catch (error) {
                    console.warn('JSON parsing failed in processMessageLinks, returning message without JSON block:', error);
                    // 解析失败时，移除JSON代码块，只保留其他内容
                    const cleanMessage = message.replace(/```json[\s\S]*?```/g, '');
                    return cleanMessage.trim() || '数据处理完成'; 
                }
            }
            return message; // 如果不包含```json或者不是字符串，直接返回原始消息
        },
    
        
        // 发送消息的方法，修改为支持文件
        async sendMessage() {
            if (!this.inputMessage.trim() && !this.isGenerating) return;
            
            // 如果正在生成，则停止生成
            if (this.isGenerating) {
                await this.stopGeneration();
                return;
            }
            
            const userMessage = this.inputMessage.trim();
            this.inputMessage = '';
            this.loading = true;
            this.isGenerating = true;
            
            // 添加用户消息到聊天历史
            this.chatHistory.push({
                content: userMessage,
                isUser: true
            });
            
            // 添加临时的"AI生成内容中..."消息
            this.chatHistory.push({
                content: '',
                isUser: false,
                isGenerating: true,
                isTemporary: true,
                rawResponses: [], // 存储原始响应块
                metadata: {},
                usage: {},
                retriever_resources: []
            });
            
            // 显示专业加载界面
            this.showLoadingMessage = true;
            this.startLoadingSteps();
            
            // 设置加载超时
            this.loadingTimer = setTimeout(() => {
                this.showLoadingMessage = false;
                this.stopLoadingSteps();
            }, 10000);
            
            try {
                console.log('发送消息:', userMessage);
                
                // 使用 fetch API 进行流式请求
                const response = await fetch(this.apiUrl, {
                    method: 'POST',
                    headers: {
                        'Authorization': this.headers.Authorization,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        inputs: {},
                        query: userMessage,
                        response_mode: "streaming",
                        conversation_id: this.conversationId || '',
                        user: "abc-123",
                        files: []
                    })
                });

                // 检查响应状态
                if (!response.ok) {
                    throw new Error(`HTTP 错误! 状态: ${response.status}`);
                }

                // 获取流式读取器
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                
                let buffer = ''; // 用于存储不完整的数据块
                let fullResponse = ''; // 存储完整响应用于调试
                let hasReceivedFirstChunk = false; // 标记是否已收到第一个数据块
                
                // 关闭加载消息，开始接收实际内容
                this.showLoadingMessage = false;
                this.stopLoadingSteps();
                if (this.loadingTimer) {
                    clearTimeout(this.loadingTimer);
                    this.loadingTimer = null;
                }
                
                while (true) {
                    const { done, value } = await reader.read();
                    
                    if (done) {
                        console.log('流式响应结束');
                        break;
                    }
                    
                    // 解码当前数据块
                    const chunk = decoder.decode(value, { stream: true });
                    buffer += chunk;
                    fullResponse += chunk;
                    
                    // 处理可能包含多个完整事件的缓冲区
                    let lines = buffer.split('\n');
                    buffer = lines.pop() || ''; // 保留最后一个可能不完整的行
                    
                    for (let line of lines) {
                        line = line.trim();
                        if (!line) continue;
                        
                        // 处理 Server-Sent Events 格式
                        if (line.startsWith('data: ')) {
                            const data = line.substring(6).trim();
                            
                            // 跳过空数据和结束标记
                            if (!data || data === '[DONE]') continue;
                            
                            try {
                                // 解析 JSON 事件
                                const eventData = JSON.parse(data);
                                //console.log('收到事件:', eventData);
                                
                                // 保存原始响应到最后一条AI消息
                                if (this.chatHistory.length > 0) {
                                    const lastMessage = this.chatHistory[this.chatHistory.length - 1];
                                    if (!lastMessage.isUser) {
                                        lastMessage.rawResponses.push(data);
                                    }
                                }
                                
                                // 根据事件类型处理
                                switch (eventData.event) {
                                    case 'message':
                                        // 标记已收到第一个数据块，但不立即清除临时状态
                                        // 让handleMessageEvent方法来智能判断何时清除临时状态
                                        if (!hasReceivedFirstChunk) {
                                            hasReceivedFirstChunk = true;
                                            console.log('🎯 收到第一个消息事件，开始智能处理临时状态');
                                        }
                                        this.handleMessageEvent(eventData);
                                        break;
                                    case 'message_end':
                                        this.handleMessageEndEvent(eventData);
                                        break;
                                    case 'error':
                                        this.handleErrorEvent(eventData);
                                        return; // 错误时直接返回
                                    case 'message_file':
                                        this.handleFileEvent(eventData);
                                        break;
                                    case 'workflow_started':
                                    case 'workflow_finished':
                                    case 'node_started':
                                    case 'node_finished':
                                        this.handleWorkflowEvent(eventData);
                                        break;
                                    default:
                                        console.log('未处理的事件类型:', eventData.event);
                                }
                                
                            } catch (parseError) {
                                console.warn('解析事件数据失败:', parseError, '原始数据:', data);
                                
                                // 如果解析失败，尝试作为普通文本处理
                                if (this.chatHistory.length > 0) {
                                    const lastMessage = this.chatHistory[this.chatHistory.length - 1];
                                    if (!lastMessage.isUser) {
                                        // 如果还是临时消息，清除临时状态
                                        if (lastMessage.isTemporary) {
                                            lastMessage.isGenerating = false;
                                            lastMessage.isTemporary = false;
                                        }
                                        lastMessage.content += data;
                                    }
                                }
                            }
                        }
                    }
                    
                    // 实时更新UI
                    this.$nextTick(() => {
                        const chatHistory = document.querySelector('.chat-history');
                        chatHistory.scrollTop = chatHistory.scrollHeight;
                    });
                }
                
                // 处理剩余的缓冲区数据
                if (buffer.trim()) {
                    console.log('处理剩余缓冲区数据:', buffer);
                    this.processRemainingBuffer(buffer);
                }
                
                // 保存完整响应到最后一条消息用于调试
                if (this.chatHistory.length > 0) {
                    const lastMessage = this.chatHistory[this.chatHistory.length - 1];
                    if (!lastMessage.isUser) {
                        lastMessage.fullResponse = fullResponse;
                        
                        // 尝试从完整内容中提取和解析JSON数据
                        this.extractAndProcessJsonData(lastMessage);
                    }
                }
                console.log(this.dataArray,'this.dataArray')
                
                // 新增：当数据更新后，可以选择自动生成动态界面
                // if (this.dataArray && this.dataArray.length > 0) {
                //     // 询问用户是否要生成动态界面
                //     this.$confirm('检测到新的数据，是否使用 DeepSeek AI 生成动态界面？', '智能界面生成', {
                //         confirmButtonText: '生成',
                //         cancelButtonText: '取消',
                //         type: 'info'
                //     }).then(() => {
                //         this.applyDynamicHtml();
                //     }).catch(() => {
                //         console.log('用户取消了动态界面生成');
                //     });
                    
                //     // 同时生成数据分析洞察
                //     // this.generateDataInsights();
                // }
                
                // console.log("流式响应处理完成，完整响应:", fullResponse);
                
            } catch (error) {
                console.error('请求错误:', error);
                
                // 更新最后一条AI消息显示错误
                if (this.chatHistory.length > 0) {
                    const lastMessage = this.chatHistory[this.chatHistory.length - 1];
                    if (!lastMessage.isUser) {
                        lastMessage.content = `请求出错: ${error.message}`;
                        lastMessage.isError = true;
                        lastMessage.isGenerating = false;
                        lastMessage.isTemporary = false;
                    }
                }
                
                this.$message.error('请求失败，请稍后重试');
            } finally {
                this.loading = false;
                this.isGenerating = false;
                this.currentTaskId = null;
                this.uploadLoading = false;
                
                // 清理加载状态
                if (this.loadingTimer) {
                    clearTimeout(this.loadingTimer);
                    this.loadingTimer = null;
                }
                this.showLoadingMessage = false;
                this.stopLoadingSteps();
                
                this.$nextTick(() => {
                    const chatHistory = document.querySelector('.chat-history');
                    chatHistory.scrollTop = chatHistory.scrollHeight;
                });
            }
        },

       
        // 处理剩余缓冲区数据
        processRemainingBuffer(buffer) {
            try {
                // 尝试解析缓冲区中的JSON
                if (buffer.includes('{') && buffer.includes('}')) {
                    const jsonStart = buffer.indexOf('{');
                    const jsonEnd = buffer.lastIndexOf('}');
                    if (jsonStart !== -1 && jsonEnd !== -1 && jsonEnd > jsonStart) {
                        const jsonStr = buffer.substring(jsonStart, jsonEnd + 1);
                        try {
                            const jsonData = JSON.parse(jsonStr);
                            console.log('从剩余缓冲区解析到JSON:', jsonData);
                            
                            // 处理这个JSON数据
                            if (jsonData.event === 'message_end') {
                                this.handleMessageEndEvent(jsonData);
                            }
                        } catch (parseError) {
                            console.warn('解析剩余缓冲区JSON失败:', parseError);
                        }
                    }
                }
            } catch (error) {
                console.error('处理剩余缓冲区时出错:', error);
            }
        },
        
        // 从消息内容中提取和处理JSON数据
        extractAndProcessJsonData(message) {
            if (!message.content) return;
            
            try {
                // 查找消息内容中的JSON数据
                const content = message.content;
                const jsonRegex = /\{[\s\S]*?\}/g;
                const matches = content.match(jsonRegex);
                
                if (matches && matches.length > 0) {
                    for (let match of matches) {
                        try {
                            const jsonData = JSON.parse(match);
                            console.log('从消息内容中提取到JSON数据:', jsonData);
                            // this.dataArray=[]
                            this.dataArray.push(jsonData);

                            
                            // 保存解析的JSON数据
                            message.extractedJsonData = message.extractedJsonData || [];
                            message.extractedJsonData.push(jsonData);
                            
                            // 如果是数据可视化相关的JSON，更新显示
                            if (this.isDataVisualizationJson(jsonData)) {
                                this.updateDynamicDataDisplay(jsonData);
                            }
                            
                        } catch (parseError) {
                            console.warn('解析JSON片段失败:', parseError, '原始数据:', match);
                        }
                    }
                }
                
             
                
            } catch (error) {
                console.error('提取JSON数据时出错:', error);
            }
        },
        
      
        
       
        formatObject(obj, keys) {
            return keys.map(key => `${key}：${obj[key]}`).join("<br/>");
        },
        
      

        // 处理文本消息事件
        handleMessageEvent(eventData) {
            if (!eventData.answer) return;
            
            // 保存任务ID，用于可能的中止操作
            if (eventData.task_id) {
                this.currentTaskId = eventData.task_id;
            }
            
            // 保存会话ID
            if (eventData.conversation_id && !this.conversationId) {
                this.conversationId = eventData.conversation_id;
            }
            
            // 更新最后一条AI消息内容
            if (this.chatHistory.length > 0) {
                const lastMessage = this.chatHistory[this.chatHistory.length - 1];
                if (!lastMessage.isUser) {
                    // 累加文本内容
                    lastMessage.content += eventData.answer;
                    
                    // 检查是否应该清除临时状态 - 使用更精确的逻辑
                    if (lastMessage.isTemporary || lastMessage.isGenerating) {
                        const content = lastMessage.content;
                        console.log('📝 当前累积内容:', content);
                        
                        // 检查是否包含```json
                        const hasJsonStart = content.includes('```json');
                        const hasJsonEnd = hasJsonStart && 
                                           content.split('```json')[1] && 
                                           content.split('```json')[1].includes('```');
                        
                        let shouldClearTemporary = false;
                        
                        // 如果包含完整的JSON块，检查是否能成功解析
                        if (hasJsonStart && hasJsonEnd) {
                            try {
                                const parts = content.split('```json');
                                if (parts.length > 1) {
                                    const jsonString = parts[1].split('```')[0].trim();
                                    if (jsonString) {
                                        const jsonData = JSON.parse(jsonString);
                                        // 检查是否包含完整的requestedData
                                        if (jsonData && jsonData.requestedData && Array.isArray(jsonData.requestedData) && jsonData.requestedData.length > 0) {
                                            console.log('🎯 检测到完整有效的JSON数据，清除临时状态');
                                            shouldClearTemporary = true;
                                        }
                                    }
                                }
                            } catch (parseError) {
                                console.log('⏳ JSON解析失败，保持生成状态');
                            }
                        }
                        // 如果不包含JSON，但内容足够长且有意义，也可以清除临时状态
                        else if (!hasJsonStart && content.length > 50 && content.trim().length > 30) {
                            console.log('🎯 检测到充足的非JSON内容，清除临时状态');
                            shouldClearTemporary = true;
                        }
                        // 如果包含JSON开始但未结束，继续保持生成状态
                        else if (hasJsonStart && !hasJsonEnd) {
                            console.log('⏳ JSON开始但未完成，保持生成状态');
                            shouldClearTemporary = false;
                        }
                        
                        // 应用清除临时状态的决定
                        if (shouldClearTemporary) {
                            lastMessage.isGenerating = false;
                            lastMessage.isTemporary = false;
                        }
                    }
                    
                    // 尝试解析answer中可能包含的JSON
                    this.tryParseJsonInAnswer(lastMessage, eventData.answer);
                }
            }
            
            // 关闭加载动画，如果还在显示
            if (this.showLoadingMessage) {
                clearTimeout(this.loadingTimer);
                this.showLoadingMessage = false;
            }
        },

        // 处理消息结束事件
        handleMessageEndEvent(eventData) {
            console.log("消息结束:", eventData);
            
            try {
                // 保存元数据和使用信息，安全处理可能缺失的字段
                if (this.chatHistory.length > 0) {
                    const lastMessage = this.chatHistory[this.chatHistory.length - 1];
                    if (!lastMessage.isUser) {
                        // 安全地设置元数据，避免直接引用可能不存在的属性
                        lastMessage.metadata = eventData.metadata || {};
                        lastMessage.usage = eventData.usage || {};
                        
                        // 保存message_id用于获取建议问题
                        if (eventData.id) {
                            this.lastMessageId = eventData.id;
                            lastMessage.messageId = eventData.id;
                            console.log("✅ 保存消息ID:", eventData.id);
                        } else {
                            console.warn("⚠️ 消息结束事件中没有找到ID字段:", Object.keys(eventData));
                        }
                        
                        // 安全处理retriever_resources
                        if (eventData.retriever_resources) {
                            try {
                                // 如果retriever_resources是字符串，尝试解析
                                if (typeof eventData.retriever_resources === 'string') {
                                    try {
                                        lastMessage.retriever_resources = JSON.parse(eventData.retriever_resources);
                                    } catch (parseError) {
                                        console.warn("解析retriever_resources失败:", parseError);
                                        lastMessage.retriever_resources = [];
                                    }
                                } else {
                                    // 否则直接赋值
                                    lastMessage.retriever_resources = eventData.retriever_resources || [];
                                }
                            } catch (resourceError) {
                                console.error("处理retriever_resources时出错:", resourceError);
                                lastMessage.retriever_resources = [];
                            }
                        } else {
                            lastMessage.retriever_resources = [];
                        }
                        
                        // 如果metadata中有retriever_resources，也安全处理
                        if (lastMessage.metadata && lastMessage.metadata.retriever_resources) {
                            try {
                                if (typeof lastMessage.metadata.retriever_resources === 'string') {
                                    try {
                                        lastMessage.metadata.retriever_resources = JSON.parse(lastMessage.metadata.retriever_resources);
                                    } catch (metaParseError) {
                                        console.warn("解析metadata.retriever_resources失败:", metaParseError);
                                        lastMessage.metadata.retriever_resources = [];
                                    }
                                }
                            } catch (metaError) {
                                console.error("处理metadata.retriever_resources时出错:", metaError);
                                lastMessage.metadata.retriever_resources = [];
                            }
                        }
                    }
                }
            } catch (error) {
                console.error("处理消息结束事件时出错:", error);
            }
            
            // 关闭加载状态
            this.isGenerating = false;
            this.currentTaskId = null;
            
            // 获取建议问题 - 延迟一秒后获取，确保消息已经完全处理
            setTimeout(() => {
                console.log("🔄 开始获取建议问题，当前消息ID:", this.lastMessageId);
                this.loadingSuggestions = true;
                this.getSuggestedQuestions();
            }, 1000);
        },

        // 处理错误事件
        handleErrorEvent(eventData) {
            console.error("接收到错误:", eventData);
            
            // 显示错误消息
            if (this.chatHistory.length > 0) {
                const lastMessage = this.chatHistory[this.chatHistory.length - 1];
                if (!lastMessage.isUser) {
                    lastMessage.content = `错误 (${eventData.status}): ${eventData.message}`;
                    lastMessage.isError = true;
                }
            }
            
            // 关闭加载状态
            this.isGenerating = false;
            this.currentTaskId = null;
            this.showLoadingMessage = false;
            
            // 显示错误通知
            this.$message.error(eventData.message);
        },

        // 处理文件事件
        handleFileEvent(eventData) {
            console.log("收到文件事件:", eventData);
            
            // 如果是图片，可以在消息中添加图片显示
            if (eventData.type === 'image' && eventData.url) {
                if (this.chatHistory.length > 0) {
                    const lastMessage = this.chatHistory[this.chatHistory.length - 1];
                    if (!lastMessage.isUser) {
                        // 添加图片到消息中
                        lastMessage.content += `<div class="message-image"><img src="${eventData.url}" alt="AI生成图片" style="max-width:100%;"></div>`;
                    }
                }
            }
        },

        // 处理工作流相关事件
        handleWorkflowEvent(eventData) {
            // console.log("工作流事件:", eventData);
            // 根据需要处理工作流事件
        },

        renderChartHTML(html) {
            // 实现图表渲染逻辑
            console.log("渲染图表HTML:", html);
        },

        // 尝试解析answer中可能包含的JSON
        tryParseJsonInAnswer(message, text) {
            // 尝试检测JSON格式
            if (!text) return;
            
            try {
                // 查找可能的JSON开始和结束位置
                const jsonStartIndex = text.indexOf('{');
                const jsonEndIndex = text.lastIndexOf('}');
                
                if (jsonStartIndex !== -1 && jsonEndIndex !== -1 && jsonEndIndex > jsonStartIndex) {
                    // 提取可能的JSON字符串
                    const possibleJson = text.substring(jsonStartIndex, jsonEndIndex + 1);
                    
                    try {
                        // 尝试解析
                        const jsonData = JSON.parse(possibleJson);
                        
                        // 如果解析成功，保存JSON数据
                        if (jsonData && typeof jsonData === 'object') {
                            console.log("从answer中提取到JSON数据:", jsonData);
                            
                            // 保存原始JSON数据
                            message.rawJsonData = possibleJson;
                            message.parsedData = jsonData;
                            
                            // 如果是数据可视化相关的JSON，更新动态数据
                            if (jsonData.title || jsonData.data || jsonData.chart) {
                                this.dynamicData = {
                                    title: jsonData.title || '数据分析结果',
                                    originalData: jsonData,
                                    rawJson: true,
                                    displayData: jsonData.data || jsonData
                                };
                                this.showCharts = true;
                            }
                        }
                    } catch (jsonError) {
                        console.warn("JSON解析失败:", jsonError);
                    }
                }
            } catch (e) {
                // JSON解析失败，忽略错误
                console.warn("尝试解析JSON时出错:", e);
            }
        },

        // 获取建议问题的方法
        async getSuggestedQuestions() {
            try {
                // 检查是否有最新的消息ID
                if (!this.lastMessageId) {
                    console.warn("没有找到消息ID，无法获取建议问题");
                    this.loadingSuggestions = false;
                    // 提供默认的建议问题
                    this.suggestedQuestions = [
                        "如何查看数据分析结果?",
                        "能否展示更多详细信息?",
                        "请解释这些数据的含义"
                    ];
                    return;
                }

                console.log("正在获取建议问题，消息ID:", this.lastMessageId);

                // 调用dify API获取建议问题
                const response = await axios.get(
                    `http://114.55.133.74/v1/messages/${this.lastMessageId}/suggested`, 
                    {
                        headers: {
                            'Authorization': 'Bearer ' + this.apikey,
                            'Content-Type': 'application/json'
                        },
                        params: {
                            user: 'abc-123'
                        }
                    }
                );

                console.log("建议问题API响应:", response.data);

                if (response.data && response.data.result === 'success' && response.data.data) {
                    // 成功获取到建议问题
                    this.suggestedQuestions = response.data.data;
                    console.log("成功获取建议问题:", this.suggestedQuestions);
                } else {
                    // API返回格式不正确，提供默认建议问题
                    console.warn("API返回数据格式不正确:", response.data);
                    this.suggestedQuestions = [
                        "如何查看数据分析结果?",
                        "能否展示更多详细信息?",
                        "请解释这些数据的含义"
                    ];
                }
                
            } catch (error) {
                console.error("获取建议问题失败:", error);
                
                // 提供错误时的默认建议问题
                this.suggestedQuestions = [
                    "如何查看数据分析结果?",
                    "能否展示更多详细信息?",
                    "请解释这些数据的含义",
                    "请重新分析这些数据",
                    "能否提供更详细的解释?"
                ];
                
                // 如果是网络错误或API错误，显示友好提示
                if (error.response) {
                    console.error("API错误响应:", error.response.status, error.response.data);
                    this.$message.warning(`获取建议问题失败 (${error.response.status})，显示默认建议`);
                } else if (error.request) {
                    console.error("网络请求失败:", error.request);
                    this.$message.warning("网络连接失败，显示默认建议问题");
                } else {
                    console.error("请求配置错误:", error.message);
                    this.$message.warning("请求配置错误，显示默认建议问题");
                }
            } finally {
                // 确保加载状态被清除
                this.loadingSuggestions = false;
            }
        },
        
        // 新增：选择建议问题
        selectSuggestedQuestion(question) {
            if (this.loading || this.isGenerating) {
                this.$message.warning('请等待当前操作完成');
                return;
            }
            
            // 将选中的问题设置为输入内容
            this.inputMessage = question;
            
            // 显示用户选择了建议问题的反馈
            this.$message.success(`已选择问题: ${question.length > 20 ? question.substring(0, 20) + '...' : question}`);
            
            // 清空当前建议问题（避免重复显示）
            this.suggestedQuestions = [];
            
            // 自动发送消息
            this.$nextTick(() => {
                this.sendMessage();
            });
        },
        
        // 新增：判断是否应该显示"AI生成内容中..."
        shouldShowGeneratingMessage(message, index) {
            // 如果不是AI消息，不显示
            if (message.isUser) {
                return false;
            }
            
            // 如果不是最后一条消息，不显示生成状态
            if (index !== this.chatHistory.length - 1) {
                return false;
            }
            
            // 如果消息有实际内容，进行更精确的检查
            if (message.content) {
                // 检查是否包含```json但尚未完成处理
                const hasJsonStart = message.content.includes('```json');
                const hasJsonEnd = message.content.includes('```json') && 
                                  message.content.split('```json')[1] && 
                                  message.content.split('```json')[1].includes('```');
                
                // 如果包含```json开始但还未结束，继续显示生成状态
                if (hasJsonStart && !hasJsonEnd) {
                    console.log('⏳ JSON开始但未完成，继续显示生成状态');
                    return true;
                }
                
                // 如果包含```json且已结束，但JSON内容可能不完整，检查是否成功解析
                if (hasJsonStart && hasJsonEnd) {
                    try {
                        const parts = message.content.split('```json');
                        if (parts.length > 1) {
                            const jsonString = parts[1].split('```')[0].trim();
                            if (jsonString) {
                                // 尝试解析JSON
                                const jsonData = JSON.parse(jsonString);
                                // 检查是否包含requestedData且数据完整
                                if (jsonData && jsonData.requestedData && Array.isArray(jsonData.requestedData) && jsonData.requestedData.length > 0) {
                                    console.log('✅ JSON完整且包含有效数据，隐藏生成状态');
                                    return false;
                                } else {
                                    console.log('⏳ JSON不完整或无效，继续显示生成状态');
                                    return true;
                                }
                            } else {
                                console.log('⏳ JSON内容为空，继续显示生成状态');
                                return true;
                            }
                        }
                    } catch (parseError) {
                        console.log('⏳ JSON解析失败，继续显示生成状态');
                        return true;
                    }
                }
                
                // 先通过processMessageLinks处理内容，检查是否包含完整的数据结果
                const processedContent = this.processMessageLinks(message.content);
                console.log('🔍 检查处理后的内容:', processedContent);
                
                // 只有当处理后的内容真正包含完整的数据结果时才隐藏生成状态
                if (processedContent && processedContent !== message.content && (
                    processedContent.includes('<strong>📊 数据结果：</strong>') ||
                    (processedContent.includes('📊') && processedContent.includes('数据结果：'))
                )) {
                    console.log('✅ 检测到完整的数据结果，隐藏生成状态');
                    return false;
                }
                
                // 如果内容很长但不包含JSON或数据结果，且不再生成，也隐藏生成状态
                if (message.content.trim().length > 50 && 
                    !hasJsonStart && 
                    !this.isGenerating && 
                    !message.isGenerating && 
                    !message.isTemporary) {
                    console.log('✅ 内容充足且已完成生成，隐藏生成状态');
                    return false;
                }
            }
            
            // 如果正在生成中，显示生成状态
            if (this.isGenerating) {
                console.log('⏳ 正在生成中，显示生成状态');
                return true;
            }
            
            // 如果是临时消息或标记为正在生成，显示生成状态
            if (message.isTemporary || message.isGenerating) {
                console.log('⏳ 临时消息或正在生成，显示生成状态');
                return true;
            }
            
            // 如果消息内容为空或很短，且系统处于加载状态，显示生成状态
            if ((!message.content || message.content.trim().length <= 5) && this.loading) {
                console.log('⏳ 内容为空且加载中，显示生成状态');
                return true;
            }
            
            console.log('❌ 不显示生成状态');
            return false;
        },
        
        // 格式化数字显示
        formatNumber(value) {
            if (value === undefined || value === null) return "0";
            
            // 如果是字符串且包含百分号，直接返回
            if (typeof value === 'string' && value.includes('%')) {
                return value;
            }
            
            // 尝试转换为数字
            const num = parseFloat(value);
            if (isNaN(num)) return value;
            
            // 格式化数字
            return num.toLocaleString();
        },
        
        // 开始加载步骤动画
        startLoadingSteps() {
            this.currentLoadingStep = 0;
            this.loadingStatusText = this.loadingStatusSteps[0];
            
            this.loadingStepTimer = setInterval(() => {
                this.currentLoadingStep = (this.currentLoadingStep + 1) % this.loadingStatusSteps.length;
                this.loadingStatusText = this.loadingStatusSteps[this.currentLoadingStep];
            }, 1200);
        },
        
        // 停止加载步骤动画
        stopLoadingSteps() {
            if (this.loadingStepTimer) {
                clearInterval(this.loadingStepTimer);
                this.loadingStepTimer = null;
            }
        },
        
        // 中止生成
        async stopGeneration() {
            if (!this.currentTaskId) return;
            
            try {
                await axios.post(`http://114.55.133.74/v1/tasks/${this.currentTaskId}/cancel`, {}, {
                    headers: this.headers
                });
                
                console.log("已中止生成");
            } catch (error) {
                console.error("中止生成失败:", error);
            } finally {
                this.isGenerating = false;
                this.currentTaskId = null;
            }
        },
     
        
        // 显示最后一条AI消息的原始数据
        showLastMessageRawData() {
            // 查找最后一条AI消息
            let lastAIMessage = null;
            for (let i = this.chatHistory.length - 1; i >= 0; i--) {
                if (!this.chatHistory[i].isUser) {
                    lastAIMessage = this.chatHistory[i];
                    break;
                }
            }
            
            if (!lastAIMessage) {
                this.$message.info('没有找到AI消息');
                return;
            }
            
            // 收集所有可能的原始数据
            const rawDataSources = {
                fullResponse: lastAIMessage.fullResponse || '无完整响应',
                rawResponses: lastAIMessage.rawResponses || [],
                rawData: lastAIMessage.rawData || '无原始表格数据',
                rawJsonData: lastAIMessage.rawJsonData || '无原始JSON数据',
                parsedData: lastAIMessage.parsedData ? JSON.stringify(lastAIMessage.parsedData, null, 2) : '无解析数据'
            };
            
            // 创建一个显示原始数据的消息
            let rawDataMessage = '<strong>原始数据日志：</strong><br>';
            
            // 添加完整响应
            rawDataMessage += '<details><summary>完整响应</summary><pre style="background-color: #f5f5f5; padding: 10px; overflow: auto; max-height: 300px;">' + 
                this.escapeHtml(rawDataSources.fullResponse) + 
                '</pre></details><br>';
            
            // 添加分块响应
            if (rawDataSources.rawResponses.length > 0) {
                rawDataMessage += '<details><summary>分块响应 (' + rawDataSources.rawResponses.length + '个块)</summary>';
                rawDataSources.rawResponses.forEach((chunk, index) => {
                    rawDataMessage += '<details><summary>块 #' + (index + 1) + '</summary><pre style="background-color: #f5f5f5; padding: 10px; overflow: auto;">' + 
                        this.escapeHtml(chunk) + 
                        '</pre></details>';
                });
                rawDataMessage += '</details><br>';
            }
            
            // 添加原始表格数据
            if (rawDataSources.rawData !== '无原始表格数据') {
                rawDataMessage += '<details><summary>原始表格数据</summary><pre style="background-color: #f5f5f5; padding: 10px; overflow: auto;">' + 
                    this.escapeHtml(rawDataSources.rawData) + 
                    '</pre></details><br>';
            }
            
            // 添加原始JSON数据
            if (rawDataSources.rawJsonData !== '无原始JSON数据') {
                rawDataMessage += '<details><summary>原始JSON数据</summary><pre style="background-color: #f5f5f5; padding: 10px; overflow: auto;">' + 
                    this.escapeHtml(rawDataSources.rawJsonData) + 
                    '</pre></details><br>';
            }
            
            // 添加解析后的数据
            if (rawDataSources.parsedData !== '无解析数据') {
                rawDataMessage += '<details><summary>解析后的数据</summary><pre style="background-color: #f5f5f5; padding: 10px; overflow: auto;">' + 
                    rawDataSources.parsedData + 
                    '</pre></details>';
            }
            
            // 添加到聊天历史
            this.chatHistory.push({
                content: rawDataMessage,
                isUser: false,
                isDebugInfo: true
            });
            
            // 滚动到最新消息
            this.$nextTick(() => {
                const chatHistory = document.querySelector('.chat-history');
                chatHistory.scrollTop = chatHistory.scrollHeight;
            });
        },
        
        // HTML转义，防止XSS
        escapeHtml(unsafe) {
            if (!unsafe) return '';
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        },
        // 处理可能被截断的message_end事件
        handlePossibleTruncatedMessageEnd() {
            // 检查缓冲区是否包含message_end事件的部分特征
            if (this.dataBuffer.includes('"event": "message_end"') || 
                this.dataBuffer.includes('"event":"message_end"')) {
                
                console.log("检测到可能被截断的message_end事件，尝试处理");
                
                // 手动触发消息结束处理
                this.isGenerating = false;
                this.currentTaskId = null;
                
                // 获取建议问题
                this.loadingSuggestions = true;
                this.getSuggestedQuestions();
                
                // 清空缓冲区
                this.dataBuffer = '';
            }
        },

        // 新增：视图模式切换事件处理
        onViewModeChange(enabled) {
            if (enabled && !this.generatedHtmlContent) {
                // 如果开启动态界面但没有生成内容，自动生成
                this.applyDynamicHtml();
            }
        },

        // 新增：判断是否为数据可视化相关的JSON
        isDataVisualizationJson(jsonData) {
            if (!jsonData || typeof jsonData !== 'object') {
                return false;
            }
            
            // 检查常见的数据可视化字段
            const visualizationKeys = [
                'chart', 'data', 'series', 'xAxis', 'yAxis', 'title', 
                'legend', 'tooltip', 'dataset', 'graph', 'nodes', 
                'links', 'value', 'name', 'type', 'category'
            ];
            
            return visualizationKeys.some(key => 
                jsonData.hasOwnProperty(key) || 
                (Array.isArray(jsonData) && jsonData.length > 0 && 
                 jsonData[0].hasOwnProperty(key))
            );
        },

        // 新增：更新动态数据显示
        updateDynamicDataDisplay(jsonData) {
            try {
                // 更新动态数据
                this.dynamicData = {
                    title: jsonData.title || '数据分析结果',
                    originalData: jsonData,
                    displayData: jsonData.data || jsonData,
                    timestamp: new Date().toLocaleString()
                };
                
                // 如果有图表数据，启用图表显示
                if (jsonData.chart || jsonData.series || Array.isArray(jsonData.data)) {
                    this.showCharts = true;
                }
                
                console.log('动态数据显示已更新:', this.dynamicData);
            } catch (error) {
                console.error('更新动态数据显示时出错:', error);
            }
        },
    }
}); 